<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of a Flywheel with a Mass-Spring System</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // Parameters
        const cx = 250;
        const cy = 200;
        const R = 150; // Flywheel radius
        const hubRadius = 5;

        // --- Drawing ---

        // 1. Draw Flywheel outline
        ctx.beginPath();
        ctx.arc(cx, cy, R, 0, 2 * Math.PI);
        ctx.stroke();

        // 2. Draw Spokes
        ctx.beginPath();
        // Spoke 1 (left)
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx - R, cy);
        // Spoke 2 (up-right)
        const angleUp = Math.PI / 3; // 60 degrees
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx + R * Math.cos(angleUp), cy - R * Math.sin(angleUp));
        // Spoke 3 (down-right)
        const angleDown = -Math.PI / 3; // -60 degrees
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx + R * Math.cos(angleDown), cy - R * Math.sin(angleDown));
        ctx.stroke();

        // 3. Draw central hub
        ctx.beginPath();
        ctx.arc(cx, cy, hubRadius, 0, 2 * Math.PI);
        ctx.fill();

        // 4. Define Mass and Spring positions
        const r_mass = 95; // Distance of mass from center
        const massX = cx - r_mass;
        const massY = cy;
        const massRadius = 8;
        
        // 5. Draw Spring
        const springStartX = cx - hubRadius;
        const springEndX = massX;
        const springY = cy;
        const springAmplitude = 8;
        const numJags = 9; // Number of up/down strokes
        const dx = (springStartX - springEndX) / numJags;

        ctx.save();
        ctx.lineWidth = 3; // Thicker line for the spring to match the hand-drawn feel
        ctx.beginPath();
        ctx.moveTo(springStartX, springY);
        let currentX = springStartX;
        for (let i = 0; i < numJags; i++) {
            currentX -= dx;
            const yOffset = (i % 2 === 0) ? -springAmplitude : springAmplitude;
            ctx.lineTo(currentX, springY + yOffset);
        }
        ctx.lineTo(massX, massY); // Ensure the spring connects exactly to the mass center
        ctx.stroke();
        ctx.restore();

        // 6. Draw Mass on top of the spring and spoke
        ctx.beginPath();
        ctx.arc(massX, massY, massRadius, 0, 2 * Math.PI);
        ctx.fillStyle = 'black';
        ctx.fill();

        // 7. Draw Labels
        ctx.font = 'italic 24px serif';
        // Label 'm'
        ctx.fillText('m', massX - massRadius - 28, massY - 5);
        // Label 'k'
        ctx.fillText('k', cx - r_mass / 2, massY + springAmplitude + 25);
        
        // 8. Caption
        ctx.font = '20px sans-serif';
        ctx.fillStyle = 'black';
        ctx.fillText('Fig. 2.64.', cx - 50, cy + R + 50);

    </script>
</body>
</html>